<template>
  <div>
    <div class="box" v-for="(item,index) in msg" :key="index" >
     <input  type="checkbox" v-model="add" :value="item"><span >{{item}}</span>
     </div>
     <p>你选中的元素，累加的值和为：{{arr}}</p>
   </div>
</template>
 
<script>
export default {

  components: {},
  props: {},
  data() {
    return {
      msg:[9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      add:[]
    };
  },
  computed: {
   arr(){
    return  this.add.reduce((prev,item)=>{
       return prev+item
      },0)
   }
  },
  watch: {},
  created() {},
  methods: {
   
  }
};
</script>

<style scoped>
   .box{
display: inline-block
   }  
</style>